<template>
  <div class="customerPanel">
    <tabs
      :tabPane="tabPaneList"
      @tab-click="handleClick"
      v-model="activeName"
      :oprateArr="handleOprateArr"
    >
    </tabs>
    <component
      :is="activeName"
      :ref="activeName"
      @handle-oprate="handleOprate"
    ></component>
  </div>
</template>
<script lang="ts">
/**
 * 客户面板
 */
import { Component, Vue } from 'vue-property-decorator'
import tabs from '@/components/configCommon/configTabs.vue'
import customerRecord from './customerRecord.vue'
import customerDetail from './customerDetail.vue'
@Component({
  name: 'webchatGlobalSetting',
  components: {
    tabs,
    customerRecord,
    customerDetail
  }
})
export default class WebchatGlobalSetting extends Vue {
  private $store: any
  private activeName = 'customerRecord'

  private limit: any = []

  private handleOprateArr = []

  private tabPaneList: any = [
    { label: '客户录入', name: 'customerRecord', _id: 'customer_record' },
    { label: '查看详情', name: 'customerDetail', _id: 'customer_detail' }
  ]

  private handleClick (item: any) {
    this.$set(this, 'handleOprateArr', [])
    this.$nextTick(() => {
      if (item.name === 'customerDetail') {
        (this as any).$refs.customerDetail.getDetailData()
      } else if (item.name === 'customerRecord') {
        (this as any).$refs.customerRecord.getRecordData()
      }
    })
  }

  private handleOprate (list: any) {
    this.$set(this, 'handleOprateArr', list || [])
  }
}
</script>
<style lang="stylus" scoped>
.customerPanel
  height 100%
  position relative
</style>
